import 'package:flutter/material.dart';
import 'package:lib_core/lib_core.dart';
import 'package:lib_ui/lib_ui.dart';

class StatefulPage extends StatefulWidget {
  const StatefulPage({super.key});

  @override
  State<StatefulPage> createState() => _StatefulPageState();
}

class _StatefulPageState extends State<StatefulPage> {
  bool flag2 = false;
  ValueKey key1 = const ValueKey(1);
  ValueKey key2 = const ValueKey(2);
  bool needAddKey = false;

  @override
  Widget build(BuildContext context) {
    // 这种用widget数据做显示的刷新后会同步更新
    final child1_1 = UseWidgetDataWidget( text: '1_1', color: Colors.black);
    final child1_2 = UseWidgetDataWidget( text: '1_2', color: Colors.red);
    // 这种将widget数据缓存到state里的，刷新时不会同步widget的数据改变而改变
    final child2_1 = UseStateDataWidget(key: needAddKey ? key1 : null, text: '2_1', color: Colors.black);
    final child2_2 = UseStateDataWidget(key: needAddKey ? key2 : null, text: '2_2', color: Colors.red);

    return Scaffold(
      appBar: TransparentAppBar(title: '刷新机制'),
      body: SizedBox(
        width: Get.width,
        child: Column(
          children: [
            Text('这种交换位置就会同步变化'),
            flag2 ? child1_1 : child1_2,
            !flag2 ? child1_1 : child1_2,
            Text('这种交换位置就不一定会同步变化'),
            flag2 ? child2_1 : child2_2,
            !flag2 ? child2_1 : child2_2,
            TextButton(
              onPressed: () {
                flag2 = !flag2;
                setState(() {});
              },
              child: Text('改变样式', style: LDFont.regular()),
            ),
            Switch(
              value: needAddKey,
              onChanged: (value) {
                setState(() {
                  needAddKey = !needAddKey;
                  if (needAddKey) {
                    '开启key强制创建新的state'.showSuccess();
                  } else {
                    '关闭key复用之前的state'.showSuccess();
                  }
                });
              },
            ),
            Text('StatefulWidget里用widget的数据显示和用State里的数据显示是不一样的，用State的话会把widget传进来的数据缓存下来了，\n'
                '刷新时数据并不会跟随widget传进来的而同步更新，虽然位置交换了，但是由于flutter在前后widget类型没变化的情况下，\n'
                '会复用之前的widget，所以实际上是没变化，触发加个key，加key目的是不复用之前的state'),
          ],
        ),
      ),
    );
  }
}

class UseWidgetDataWidget extends StatefulWidget {
  String text;
  Color color;

  UseWidgetDataWidget({super.key, required this.text, required this.color});

  @override
  State<UseWidgetDataWidget> createState() => _UseWidgetDataWidgetState();
}

class _UseWidgetDataWidgetState extends State<UseWidgetDataWidget> {
  @override
  Widget build(BuildContext context) {
    return Text(widget.text, style: TextStyle(color: widget.color));
  }
}

// 将widget的数据存到state里用
class UseStateDataWidget extends StatefulWidget {
  String text;
  Color color;

  UseStateDataWidget({super.key, required this.text, required this.color});

  @override
  State<UseStateDataWidget> createState() => _UseStateDataWidgetState();
}

class _UseStateDataWidgetState extends State<UseStateDataWidget> {
  late String text;
  late Color color;

  @override
  void initState() {
    super.initState();
    text = widget.text;
    color = widget.color;
  }

  @override
  Widget build(BuildContext context) {
    return Text(text, style: TextStyle(color: color));
  }
}
